<template>
  <view class="hub">
    <view class="hub-header">
      <view class="hub-logo">
        <image src="https://m.k12zx.com/statics/index/img/logo.png"></image>
      </view>
      <view class="hub-menu" @tap="quent">
        <image src="../../icon/管理.png"></image>
      </view>
    </view>
    <view class="hub-box"></view>
    <view :catchtouchmove="preventTouchMove"> </view>
    <view
      class="hub-body"
      catchtouchmove="preventTouchMove"
      @tap="close"
      v-if="show"
    ></view>
    <view class="hub-content" v-if="show" catchtouchmove="preventTouchMove" >
      <view >
        <view class="hub-content-title">学校介绍</view>
      </view>
      <view >
        <view class="hub-content-title">学校介绍</view>
      </view>
      <view >
        <view class="hub-content-title">学校介绍</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
     
    };
  },
  methods: {
    quent() {
      this.show = !this.show;
    },
    choose: function () {
      this.show = true;
    },
    close: function () {
      this.show = false;
    },
    preventTouchMove: function closeBodyScroll() {
      window.lockMaskScrollTop =
        document.scrollingElement.scrollTop || document.body.scrollTop;
      document.body.classList.add("popup-open");
      document.body.style.top = -window.lockMaskScrollTop + "px";
    },
    preventTouchMove: function openBodyScroll() {
      if (document.body.classList.contains("popup-open")) {
        document.body.classList.remove("popup-open");
        document.scrollingElement.scrollTop = window.lockMaskScrollTop;
      }
    },
  },
};
</script>

<style>
.hub {
  height: 100%;
}

image {
  width: 100%;
  height: 100%;
}
.hub-box {
  height: 120px;
}
.hub-header {
  position: fixed;
  display: flex;
  align-items: center;
  width: 100%;
  height: 120px;
  background-color: white;
}
.hub-logo {
  width: 40%;
  height: 80%;
  margin-left: 10px;
}
.hub-menu {
  width: 7%;
  height: 40%;
  margin-left: auto;
  margin-right: 2%;
}
.hub-body {
  position: fixed;
  width: 100%;
  margin-top: 120px;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  border-top: 2px solid #186bb7;
  align-items: center;
  flex-direction: column;
}
.hub-content {
  width: 40%;
  height: 100%;
  right: 0;
  background-color: white;
  border-top: 2px solid #186bb7;
  position: fixed;
  z-index: 2;
}
.hub-content-title {
  text-align: center;
  padding: 30px 0px;
}
</style>
